﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
  <head>
    <link rel="stylesheet" href="${ctx}/common/common.css" />
    <title>Title</title>
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all" />
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

    <style>
      .layui-body {
        overflow-y: scroll;
      }
    </style>
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

    <script src="${ctx}/common/plugins/publicJs/publicJs.js"></script>
    <script src="${ctx}/common/plugins/layuiadmin/laydate/laydate.js"></script>
    <script src="${ctx}/common/plugins/layuiadmin/layui-xtree/layui-xtree.js"></script>
  </head>
  <body>
    <!--主体内容层-->
    <div class="layui-fluid">
      <input type="hidden" id="viewpProduct" />
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12 layui-col-space15 layui-form">
          <form>
            <!--输入框内容盒子-->
            <div class="layui-col-md12">
              <div class="layui-col-md4">
                <label class="layui-form-label">产品名称</label>
                <div class="layui-input-block">
                  <input type="text" name="productName" id="productName" class="layui-input" />
                </div>
              </div>
              <div class="layui-col-md4">
                <label class="layui-form-label">产品类型</label>
                <div class="layui-input-block">
                  <div class="mtype-select-container" style="position: relative; width: 100%">
                    <div
                      id="mTypeDiv"
                      style="
                        display: block;
                        width: 100%;
                        height: 38px;
                        background: #fff;
                        line-height: 38px;
                        border: 1px solid #e6e6e6;
                        border-radius: 2px;
                        cursor: pointer;
                        position: relative;
                      "
                    >
                      <span style="color: #999; margin-left: 10px">请选择产品类型</span>
                    </div>
                    <i
                      class="layui-icon layui-icon-down"
                      style="
                        position: absolute;
                        right: 10px;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #999;
                        transition: transform 0.3s ease;
                        cursor: pointer;
                        pointer-events: auto;
                        z-index: 1;
                      "
                      id="mTypeArrow"
                    ></i>
                    <i
                      class="layui-icon layui-icon-close"
                      style="
                        position: absolute;
                        right: 30px;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #999;
                        cursor: pointer;
                        pointer-events: auto;
                        z-index: 1;
                        display: none;
                        font-size: 12px;
                      "
                      id="mTypeClear"
                      title="清空选择"
                    ></i>
                    <input type="hidden" id="mType" name="mType" />
                    <div
                      class="mTypeTreeshow"
                      style="
                        width: 100%;
                        max-height: 300px;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        background: white;
                        z-index: 1000;
                        border: 1px solid #e6e6e6;
                        border-top: none;
                        border-radius: 0 0 2px 2px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                        display: none;
                        overflow: hidden;
                        overflow-y: auto;
                      "
                    >
                      <ul id="mTypeTree"></ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md4">
                <label class="layui-form-label">行政区域</label>
                <div class="layui-input-block">
                  <div class="area-select-container" style="position: relative; width: 100%">
                    <div
                      id="areaDiv"
                      style="
                        display: block;
                        width: 100%;
                        height: 38px;
                        background: #fff;
                        line-height: 38px;
                        border: 1px solid #e6e6e6;
                        border-radius: 2px;
                        cursor: pointer;
                        position: relative;
                      "
                    >
                      <span style="color: #999; margin-left: 10px">请选择行政区域</span>
                    </div>
                    <i
                      class="layui-icon layui-icon-down"
                      style="
                        position: absolute;
                        right: 10px;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #999;
                        transition: transform 0.3s ease;
                        cursor: pointer;
                        pointer-events: auto;
                        z-index: 1;
                      "
                      id="areaArrow"
                    ></i>
                    <i
                      class="layui-icon layui-icon-close"
                      style="
                        position: absolute;
                        right: 30px;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #999;
                        cursor: pointer;
                        pointer-events: auto;
                        z-index: 1;
                        display: none;
                        font-size: 12px;
                      "
                      id="areaClear"
                      title="清空选择"
                    ></i>
                    <input type="hidden" id="area" name="area" />
                    <div
                      class="areaTreeshow"
                      style="
                        width: 100%;
                        max-height: 300px;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        background: white;
                        z-index: 1000;
                        border: 1px solid #e6e6e6;
                        border-top: none;
                        border-radius: 0 0 2px 2px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                        display: none;
                        overflow: hidden;
                        overflow-y: auto;
                      "
                    >
                      <ul id="areaTree"></ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-col-md12" style="margin-top: 5px">
              <!--输入框-->
              <div class="layui-col-md4">
                <div class="layui-input-block">
                  <input type="hidden" id="productionCompanyId" />
                  <button type="button" class="layui-btn layui-btn-warm" id="prodictionButton">生产企业</button>
                  <span style="color: red; overflow-x: hidden" id="companyName"></span>
                </div>
              </div>
            </div>
            <!--通用按钮盒子-->
            <div class="layui-col-md12" style="padding-top: 10px; padding-bottom: 10px">
              <!--通用table表格-->
              <div style="float: right" class="layui-btn-group paramBtn">
                <button id="reloadProductCount" type="button" class="layui-btn layui-btn-sm layui-btn-danger">
                  查询
                </button>
                <button id="resetProductCount" type="reset" class="layui-btn layui-btn-sm layui-btn-danger">
                  重置
                </button>
              </div>
            </div>
          </form>
          <!--通用按钮盒子-->

          <table
            class="layui-table"
            lay-data="{ url:'${ctx}/supplier/productCount/productPage', page:true,groups:5,id:'demo1' }"
            lay-filter="demo1"
          >
            <thead>
              <tr>
                <th lay-data="{field:'enterpriseName',width:350}">生产企业</th>
                <th lay-data="{field:'productClassifyName'}">产品类型</th>
                <th lay-data="{field:'productName'}">产品名称</th>
                <th lay-data="{field:'specifications',templet: '#titleTpl'}">规格/单位</th>
                <th lay-data="{field:'traceTypeName'}">溯源类型</th>
                <!-- <th lay-data="{field:'rawClassify'}">原料 </th>
                    <th lay-data="{field:'additiveClassify'}">添加剂 </th>
                    <th lay-data="{field:'accessoriesClassify'}">辅料</th>
                    <th lay-data="{field:'packagingClassify'}">包材</th> -->
                <th style="text-align: center" lay-data="{field:'right',toolbar:'#barDemo',width:200}">相关物料</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="pickingRecord">查看</a>
    </script>
    <script type="text/html" id="titleTpl">
      {{d.specifications}} {{# if(d.unit != ''){ }} /{{d.unit}} {{# } }}
    </script>
  </body>
  <script>
     var $=layui.$;

     layui.use(['tree','layer','table'], function () {


     })
     layui.use(['tree','layer','table'], function () {
         var $=layui.$;
         var loading = layer.msg("数据加载中...");
         var table1 = layui.table;
         table1.render({
             done: function () {
                 layer.close(loading);
             }
         })
         //监听filter为demo的table中的工具条
         table1.on('tool(demo1)', function (obj) {
             var data = obj.data;
         	//alert(JSON.stringify(data));
    $("#viewpProduct").val(JSON.stringify(data));
             layer.open({
                 type: 2,
                 title: '相关物料',
                 shadeClose: true,
                 offset: '10px',
                 shade: 0.8,
                 area: ['45%', '50%'],
                 content: '${ctx}/supplier/productCount/materialView?productId='+data.productId //
             });
         });

         /* 产品类型树 */
         $('.mtype-select-container').click(function(e){
             e.stopPropagation(); // 阻止事件冒泡
             if($(".mTypeTreeshow").is(":hidden")){
                 $('.mTypeTreeshow').fadeIn();
                 $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(180deg)');
             } else {
                 $('.mTypeTreeshow').fadeOut();
                 $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
             }
         });

         // 单独为箭头添加点击事件，确保箭头点击有效
         $('#mTypeArrow').click(function(e){
             e.stopPropagation();
             e.preventDefault();
             if($(".mTypeTreeshow").is(":hidden")){
                 $('.mTypeTreeshow').fadeIn();
                 $(this).css('transform', 'translateY(-50%) rotate(180deg)');
             } else {
                 $('.mTypeTreeshow').fadeOut();
                 $(this).css('transform', 'translateY(-50%) rotate(0deg)');
             }
         });

         // 清空按钮点击事件
         $('#mTypeClear').click(function(e){
             e.stopPropagation();
             e.preventDefault();
             // 清空选择
             $("#mType").val('');
             $("#mTypeDiv").html('<span style="color: #999; margin-left: 10px">请选择产品类型</span>');
             $('.mTypeTreeshow').fadeOut();
             $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
             $(this).hide(); // 隐藏清空按钮
         });

         // 为产品类型树形结构添加点击事件处理，防止点击树形结构时关闭下拉框
         $('.mTypeTreeshow').click(function(e){
             e.stopPropagation(); // 阻止事件冒泡到document
         });

         // 为产品类型树形结构内的所有元素添加点击事件处理
         $(document).on('click', '.mTypeTreeshow *', function(e){
             e.stopPropagation(); // 阻止事件冒泡
         });

         layui.tree({
             elem: '#mTypeTree',
             nodes: ${mJson},
             click: function(node){
                 $("#mType").val(node.id);
                 $("#mTypeDiv").html('<span style="color: #333; margin-left: 10px">' + node.name + '</span>');
                 $(".mTypeTreeshow").fadeOut();
                 $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
                 $('#mTypeClear').show(); // 显示清空按钮
             }
         });

         /* 区域树 */
         $('.area-select-container').click(function(e){
             e.stopPropagation(); // 阻止事件冒泡
             if($(".areaTreeshow").is(":hidden")){
                 $('.areaTreeshow').fadeIn();
                 $('#areaArrow').css('transform', 'translateY(-50%) rotate(180deg)');
             } else {
                 $('.areaTreeshow').fadeOut();
                 $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
             }
         });

         // 单独为箭头添加点击事件，确保箭头点击有效
         $('#areaArrow').click(function(e){
             e.stopPropagation();
             e.preventDefault();
             if($(".areaTreeshow").is(":hidden")){
                 $('.areaTreeshow').fadeIn();
                 $(this).css('transform', 'translateY(-50%) rotate(180deg)');
             } else {
                 $('.areaTreeshow').fadeOut();
                 $(this).css('transform', 'translateY(-50%) rotate(0deg)');
             }
         });

         // 清空按钮点击事件
         $('#areaClear').click(function(e){
             e.stopPropagation();
             e.preventDefault();
             // 清空选择
             $("#area").val('');
             $("#areaDiv").html('<span style="color: #999; margin-left: 10px">请选择行政区域</span>');
             $('.areaTreeshow').fadeOut();
             $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
             $(this).hide(); // 隐藏清空按钮
         });

         // 点击其他地方关闭下拉框
         $(document).click(function(e) {
             // 检查点击是否在行政区域下拉框容器内，包括树形结构
             if (!$(e.target).closest('.area-select-container').length &&
                 !$(e.target).closest('.areaTreeshow').length) {
                 $('.areaTreeshow').fadeOut();
                 $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
             }
             // 检查点击是否在产品类型下拉框容器内，包括树形结构
             if (!$(e.target).closest('.mtype-select-container').length &&
                 !$(e.target).closest('.mTypeTreeshow').length) {
                 $('.mTypeTreeshow').fadeOut();
                 $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
             }
         });

         // 为树形结构添加点击事件处理，防止点击树形结构时关闭下拉框
         $('.areaTreeshow').click(function(e){
             e.stopPropagation(); // 阻止事件冒泡到document
         });

         // 为树形结构内的所有元素添加点击事件处理
         $(document).on('click', '.areaTreeshow *', function(e){
             e.stopPropagation(); // 阻止事件冒泡
         });

         layui.tree({
             elem: '#areaTree',
             nodes: ${areaTree},
             click: function(node){
                 $("#area").val(node.id);
                 $("#areaDiv").html('<span style="color: #333; margin-left: 10px">' + node.name + '</span>');
                 $(".areaTreeshow").fadeOut();
                 $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
                 $('#areaClear').show(); // 显示清空按钮
             }
         });
         /**
          * 条件查询中的查询按钮
          * */
         $("#reloadProductCount").on("click",function(){

         	var ids=$("#productionCompanyId").val().split(",");
         	var jsonParamStr='';
         	if(ids && ids.length>0)
         	{
         		var jsonParam=[];
         		for (var i in ids){
         			if(ids[i]){
             			jsonParam.push({id:ids[i]});
         			}
                 }
         		jsonParamStr=JSON.stringify(jsonParam);
         	}
         	//这里以搜索为例
             table1.reload('demo1',{
                 where: { //设定异步数据接口的额外参数，任意设
                 	productName: $("#productName").val(),
                     areaId: $("#area").val(),
                     productClassifyId: $("#mType").val(),
                     jsonParam: jsonParamStr
                 }
                 ,page: {
                     curr: 1 //重新从第 1 页开始
                 }
             });
         })
         /**
          * 重置条件查询
          * */
         $("#resetProductCount").on("click",function(){
         	$("#productName").val("")
             $("#productionCompanyId").val("");
             $("#companyName").html("");
             $("#mTypeDiv").html('<span style="color: #999; margin-left: 10px">请选择产品类型</span>');
             $("#mType").val("");
             $('.mTypeTreeshow').fadeOut();
             $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
             $('#mTypeClear').hide(); // 隐藏产品类型清空按钮
             $("#areaDiv").html('<span style="color: #999; margin-left: 10px">请选择行政区域</span>');
             $("#area").val("");
             $('.areaTreeshow').fadeOut();
             $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
             $('#areaClear').hide(); // 隐藏行政区域清空按钮
             $("#viewpProduct").val("");
             //这里以搜索为例
             table1.reload('demo1',{
                 where: { //设定异步数据接口的额外参数，任意设
                 	productName: '',
                     areaId: '',
                     productClassifyId: '',
                     jsonParam: ''
                 }
                 ,page: {
                     curr: 1 //重新从第 1 页开始
                 }
             });
         })

         /**
          * 点击生产企业按钮
          */
         $("#prodictionButton").on("click",function(){
             layer.open({
                 type: 2,
                 title: '生产企业',
                 shadeClose: true,
                 offset: '10px',
                 shade: 0.8,
                 area: ['50%', '80%'],
                 content: '${ctx}/productionDetection/queryEnterpriseAll?companyIds='+$("#productionCompanyId").val() //iframe的url
             });
         })

     });
  </script>
</html>
